<template>
  <div>
    <div
      @mousedown="down"
      @mousemove="move"
      @mouseup="up"
      class="box"
    >121212</div>

    <table ref="t" style="width: 500px;height: 250px;" border>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: 'table-vue',
  data() {
    return {
      dragging: false
    }
  },
  methods: {
    down(event) {
      this.dragging = true
      console.log(event.clientX, event.clientY, 'down')
      console.log(this.$refs.t.offsetTop, 'td')
    },
    move(event) {
      if (this.dragging) {
        console.log(event.clientX, event.clientY, 'move')
      }
    },
    up() {
      this.dragging = false
    }
  }
}
</script>
<style lang="scss" scoped>
.box{
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>
